<template>
    <div :class="$style.wrapper">
		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" fixed="left" type="selection" width="55"> </el-table-column>
			<el-table-column prop="id" label="ID" align="center"></el-table-column>
			<el-table-column align="center" width="120" prop="module_image" label="图片">
				<template slot-scope="scope">
					<img :src="scope.row.module_image_url" style="width: auto;height: 40px" /><br />
				</template>
			</el-table-column>
			<el-table-column align="left" prop="module_image" label="图片链接">
			</el-table-column>
			<el-table-column align="center" prop="module_name" label="模块名称"> </el-table-column>
			<el-table-column align="left" prop="module_url" label="模块跳转链接"> </el-table-column>
		</el-table>

		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
		<div :class="$style.bottomBar">
            <el-button type="primary" @click="setHandle">
            为{{ userName }}设置模块
            </el-button>
        </div>
    </div>
</template>

<script>
import {formatServerDate} from '@/utils/date';
import {getResourceUrl } from '@/utils/index';
import { isNumber } from '@/utils/validate';
export default {
	name: 'SetModule',
	components: {
	},
	data() {
		return {
			tableData: [],
            loading: false,
			total: 0,
			size: 100,
			current: 1,
            userId: '',
            userName: '',
		};
	},
    mounted(){

    },

    methods: {
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getList();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.current = val;
			this.getList();
		},
		getList() {
			return this.$axios
				.get('/admin/boat/module/list', {
					params: {
						current: this.current,
						size: this.size,
					},
				})
				.then((res) => {
                    const result = res.result;
					this.tableData = result.records.map((item) => {
                        return {
							module_image_url: getResourceUrl(item.module_image),
							...item,
						};
                    });
					this.size = result.size;
					this.current = result.current;
					this.total = result.total;
				}).catch((e) => {
                    console.log(e);
                });
		},
        // 设置
		setHandle() {
			var ids = [];

            this.multipleSelection.forEach((row) => {
                ids.push(row.id);
            });
			this.$axios({
                method: 'post',
            url: '/admin/boat/module/userPrem', 
            params:{
                moduleIdList: ids.join(','), 
                userId: this.userId,
            }
        }).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.getList();
					},
				});
			});
		},

		init(data) {
            this.userId = data.id;
            this.userName = data.user_name;
            Promise.all([
                this.getList(),
                this.$axios.get('/admin/boat/module/userLinkList?_='+(Date.now())+'&userId=' + this.userId),
            ]).then((resList) => {
				const linkList = resList[1];
				this.multipleSelection = (linkList.result || []).map(item => {
					return this.tableData.find((tdb) => tdb.id === item.id);
				});
				
				this.multipleSelection.forEach((item) => {
					this.$refs.multipleTable.toggleRowSelection(item);
				});

				
			});
        }
    }
};
</script>

<style module>
.wrapper{
	position: relative;
	padding: 0 10px;
}

.bottomBar{
	position: absolute;
	bottom:-50px;
	left: 10px;
}
</style>